﻿@using Webdiyer.WebControls.Mvc
@model ExcellentCRM.Site.Models.SearchDeptModel

@{
    ViewBag.Title = "部门管理";
}
<style type="text/css">
    #mainContain {
        margin-top: 30px;
    }
    .modal-body {
        max-height: 450px;
    }
    #saveModal {
        width: 700px;
    }
    .table th, .table td.text-center {
        text-align: center;
    }
</style>
<div id="mainContain" class="container-fluid">
    <div class="row-fluid">
        <div class="well">
            @using (Html.BeginForm("Index", "Department", FormMethod.Post, new {@class = "form-horizontal clearfix"}))
            {
                @Html.AntiForgeryToken()
                @Html.ValidationSummary()
                <div class="span6">
                    <div class="control-group">
                        @Html.LabelFor(m => m.DeptName, new { @class = "control-label" })
                        <div class="controls">
                            @Html.TextBoxFor(m => m.DeptName, null, new {placeholder = "部门名"})
                        </div>
                    </div>
                </div>
                <div class="span5">
                    <input type="submit" value="查询" class="btn btn-primary btn-large"/>
                    <a href="@Url.Action("CreateOrUpdate", "Department")" data-backdrop="static"
                       data-keyboard="false"
                       data-target="#saveModal" data-toggle="modal" class="btn btn-large">
                        新增部门
                    </a>
                </div>
            }
        </div>
    </div>
    <div class="row-fluid">
        <table id="tbAccounts" class="table table-striped table-hover table-bordered">
            <thead>
                <tr>
                    <th>部门名</th>
                    <th>创建时间</th>
                    <th>状态</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @if (Model != null && Model.SearchResult != null)
                {
                    foreach (var dept in (Model.SearchResult))
                    {
                        <tr>
                            <td>@dept.DeptName</td>
                            <td>@dept.CreatedTime</td>
                            <td>@(dept.StatusToken != 0 ? "有效" : "无效")</td>
                            <td class="text-center">
                                <a href="@Url.Action("CreateOrUpdate", "Department", new { deptId = dept.Id })"
                                   data-backdrop="static" data-keyboard="false"
                                   data-target="#saveModal" data-toggle="modal" class="btn btn-info btn-small">
                                    编辑
                                </a>
                                @if (dept.StatusToken != 0)
                                {
                                    <a href="@Url.Action("Delete", "Department", new { deptId = dept.Id })"
                                       class="btn btn-danger btn-small" data-bind="click: removeItem">
                                        删除
                                    </a>   
                                }
                            </td>
                        </tr>
                    }
                }
            </tbody>
        </table>
        @if (Model != null)
        {
            @Html.Pager(Model.SearchResult, new PagerOptions
                {
                    PageIndexParameterName = "pageIndex",
                    CurrentPagerItemWrapperFormatString = "<span class=\"cpb\">{0}</span>",
                    NumericPagerItemWrapperFormatString = "<span class=\"item\">{0}</span>",
                    CssClass = "pages",
                    SeparatorHtml = ""
                })
        }
    </div>
</div>
<div id="saveModal" class="modal hide fade" tabindex="-1" data-backdrop="true"
     role="dialog" aria-labelledby="saveModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="saveModalLabel">新增部门</h3>
    </div>
    <div class="modal-body">
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-bind="click: saveHandle">保存</button>
        <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
    </div>
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/placeholder")
    @Scripts.Render("~/bundles/knockout")
    <script type="text/javascript">
        $(function() {
            var viewModel = function() {
                var self = this;
                self.saveHandle = function() {
                    $('#saveModal input[type=submit]').trigger('click');
                };
                self.removeItem = function (data, e) {
                    if (!e || (!e.target && !e.srcElement) ||
                    !window.confirm('是否确认删除该部门?')) return false;

                    var $lk = $(e.target || e.srcElement),
                        url = $lk.attr('href');
                    $.ajax({
                        url: url,
                        type: 'post',
                        dataType: 'json',
                        success: function(result) {
                            if (!result) {
                                alert('删除失败');
                                return;
                            }
                            if (!result.success && result.message) {
                                alert(result.message);
                                return;
                            }
                            if (result.success) {
                                $lk.closest('tr').fadeOut('slow', function() {
                                    $lk.closest('tr').remove();
                                });
                            }
                        }
                    });
                };
            };
            ko.applyBindings(new viewModel());
        });
    </script>
}